import { Rect as GRect, Text as GText, Image as GImage } from '@antv/g';
import { Image, Rect, Badge, CommonEvent } from '@antv/g6'

const GREY_COLOR = '#CED4D9';

class TreeNode extends Rect {
    get data() {
        return this.context.model.getNodeLikeDatum(this.id);
    }
    get childrenData() {
        return this.context.model.getChildrenData(this.id);
    }
    getImageStyle(attributes) {
        return {
            size: 100,
            src: this.data.src,
            haloStroke: '#227eff',
        }
    }
    /**
    * @Author: zhangjinhao
    * @Date 2024-09-04 18:24:47
    * @Describe: 图片渲染
    */
    drawImageShape(attributes, container) {
        const imageStyle = this.getImageStyle(attributes);
        this.upsert('customimage', Image, imageStyle, container);
    }
    getProcessBarStyle(attributes) {
        const [width, height] = this.getSize(attributes);
        return {
            x: -width / 2,
            y: -height / 2,
            width,
            height,
            fill: 'transparent',
            stroke: GREY_COLOR,
            lineWidth: 1,
            radius: 4,
            cursor: 'pointer'

        };
    }

    drawRectShape(attributes, container) {
        const processBarStyle = this.getProcessBarStyle(attributes);
        this.upsert('process-bar', GRect, processBarStyle, container);
    }

    getCollapseStyle(attributes) {
        if (this.childrenData.length === 0) return false;
        const { collapsed } = attributes;
        const [width, height] = this.getSize(attributes);
        return {
            backgroundFill: '#fff',
            backgroundHeight: 16,
            backgroundLineWidth: 1,
            backgroundRadius: 0,
            backgroundStroke: GREY_COLOR,
            backgroundWidth: 16,
            cursor: 'pointer',
            fill: GREY_COLOR,
            fontSize: 16,
            text: collapsed ? '+' : '-',
            textAlign: 'center',
            textBaseline: 'middle',
            x: 0,
            y: height / 2,
        };
    }
    drawCollapseShape(attributes, container) {
        const collapseStyle = this.getCollapseStyle(attributes);
        const btn = this.upsert('collapse', Badge, collapseStyle, container);

        if (btn && !Reflect.has(btn, '__bind__')) {
            Reflect.set(btn, '__bind__', true);
            btn.addEventListener(CommonEvent.CLICK, (e) => {
                e.stopPropagation();
                const { collapsed } = this.attributes;
                const graph = this.context.graph;
                if (collapsed) graph.expandElement(this.id);
                else graph.collapseElement(this.id);
            });
        }
    }
    /**
    * @Author: zhangjinhao
    * @Date 2024-09-26 09:30:09
    * @Describe: 文字描述
    */
    
    getCurrencyStyle(attributes, container) {
        const [width, height] = this.getSize(attributes);
        return {
            fill: '#cccccc',
            fontSize: 16,
            text: this.data.id,
            textAlign: 'center',
            textBaseline: 'middle',
            x: 0,
            y: height / 2 + 20,
        };
    }
    drawCurrencyShape(attributes, container) {
        const currencyStyle = this.getCurrencyStyle(attributes);
        this.upsert('currency', GText, currencyStyle, container);
    }

    /**
    * @Author: zhangjinhao
    * @Date 2024-09-26 09:30:23
    * @Describe: 文字背景框
    */
    getLabelRect(attributes) {
        const [width, height] = this.getSize(attributes);
        return {
            x: -width / 2,
            y: height / 2 + 10,
            width,
            height:20,
            fill: '#fff',
            lineWidth: 0,

        };
    }

    drawLableRect(attributes, container) {
        const processBarStyle = this.getLabelRect(attributes);
        this.upsert('process-bar', GRect, processBarStyle, container);
    }
    render(attributes = this.parsedAttributes, container) {
        super.render(attributes, container);
        //图片渲染
        this.drawImageShape(attributes, container);
        this.drawRectShape(attributes, container);
        this.drawCollapseShape(attributes, container);
        this.drawCurrencyShape(attributes, container);
        this.drawLableRect(attributes, container);
    }
}
export default TreeNode
